﻿<style>
    .cxuu-statistics-tips { font-size: 30px; padding: 50px; }
    .cxuu-statistics-tips li{ height: 120px; line-height: 120px; }
</style>
<div class="content-top-nav">
    <h3 style="color:#444"><i class="layui-icon layui-icon-home"> 统计操作台 / 每月信息报送统计</i>  </h3>
    <hr>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form" action="" lay-filter="FormSearch">
                    <div class="layui-card-body ">
                        <div class="layui-form">


                            <div class="layui-inline layui-show-xs-block">
                                <label class="layui-form-label">时间范围</label>
                                <div class="layui-inline" id="search-range">
                                    <div class="layui-input-inline">
                                        <input type="text" id="startDate" class="layui-input" placeholder="开始月" autocomplete="off">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="text" id="endDate" class="layui-input" placeholder="结束月" autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-inline layui-show-xs-block">
                                <select name="Nickname" lay-verify="" lay-search="" id="userlistView">
                                </select>
                                <script id="userListTpl" type="text/html">
                                     <option value="">选择登记人</option>
                                    {{#  layui.each(d.list, function(index, item){ }}
                                       <option value="{{ item.nickname }}">{{ item.deptName }} - {{ item.nickname }}</option>
                                    {{#  }); }}
                                    {{#  if(d.list.length === 0){ }}
                                      无流转
                                    {{#  } }}
                                </script>
                            </div>

                            <div class="layui-inline layui-show-xs-block" style="width:120px;">
                                <select name="SearchCid" lay-verify="" lay-search="" id="cateListView">
                                </select>
                                <script id="cateListTpl" type="text/html">
                                     <option value="">所有类别</option>
                                    {{#  layui.each(d.list, function(index, item){ }}
                                       <option value="{{ item.id }}">{{ item.name }}</option>
                                    {{#  }); }}
                                    {{#  if(d.list.length === 0){ }}
                                      无流转
                                    {{#  } }}
                                </script>
                            </div>


                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" data-type="reload" id="searchBtn"><i class="layui-icon layui-icon-refresh-3"></i>生成图表</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <blockquote class="layui-elem-quote">
            可以在图表的右上角进行图表切换，也可以数据导出等操作！
            <br />需要生成详细报表，请到登记模块生成表格数据！
        </blockquote>
        <br /><br /><br /><br />
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--统计图表展示 S-->
        <div class="layui-col-md12">
            <div id="dataViewId" style="width:100%;height:500px;text-align:center;">
                <div class="layui-row layui-col-space30">
                    <div class="layui-col-md4"></div>
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-body cxuu-statistics-tips">
                                <ul>
                                    <li><i class="layui-icon layui-icon-chart-screen" style="font-size:120px; color: #1E9FFF;"></i></li>
                                    <li> 请选择上方条件生成图表！</li>
                                </ul>

                            </div>
                        </div>
                    </div><div class="layui-col-md4"></div>
                </div>

            </div>
        </div>

        <!--统计图表展示 E-->
    </div>

</div>
<script src="~/lib/chart/echarts.min.js"></script>
<script>
    layui.define(function () {
        var element = layui.element, util = layui.util, laytpl = layui.laytpl, form = layui.form, laydate = layui.laydate;

        form.render();

        laydate.render({
            elem: '#search-range' //开始时间和结束时间所在 input 框的父选择器
            //设置开始日期、日期日期的 input 选择器
            , range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
            , type: 'month'
        });

        var getAction= function(){
            var user = $('#userlistView').val();
            $.getJSON("/Admin/Statistics/List", {
                SearchType: "month",
                Nickname: user,
                SearchCid: $('#cateListView').val(),
                StartDate: $('#startDate').val(),
                EndDate: $('#endDate').val(),
            }, function (res) {
                //渲染栏目
                var cateList = res.articleCates;
                if (cateList !== null) {
                    var data = {
                        "list": cateList
                    }
                    var cateList = cateListTpl.innerHTML, viewss = document.getElementById('cateListView');
                    laytpl(cateList).render(data, function (html) {
                        viewss.innerHTML = html;
                    });
                    form.render("select");
                }
                //渲染用户列表
                var userList = res.userIdAndName;
                if (userList !== null) {
                    var data = {
                        "list": userList
                    }
                    var getuserTpl = userListTpl.innerHTML, viewss = document.getElementById('userlistView');
                    laytpl(getuserTpl).render(data, function (html) {
                        viewss.innerHTML = html;
                    });
                    form.render("select");
                }

                //渲染统计图表

                var dataViewId = echarts.init(document.getElementById('dataViewId'));
                var dataName = [];
                var dataValue = [];
                var markNum = [];
                $.each(res.data, function (i, arr) {
                    dataName.push(arr["name"]);
                    dataValue.push(arr["value"]);
                    markNum.push(arr["markNum"]);
                });

                var userTitle = user ? user : "所有人";


                dataViewId.setOption({
                    title: [
                        {
                            text: userTitle + ' 月信息报送统计'
                        }
                    ],

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {},
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: {
                                show: true,
                                type: ['line', 'bar']
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: dataName,
                        axisLabel: {
                            formatter: '第 {value} 月'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 条'
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        show: false,
                        dimension: 0,
                        seriesIndex: 0,
                        pieces: [
                            {
                                gt: 1,
                                lt: 3,
                                color: 'rgba(0, 0, 180, 0.4)'
                            },
                            {
                                gt: 5,
                                lt: 7,
                                color: 'rgba(0, 0, 180, 0.4)'
                            }
                        ]
                    },
                    series: [
                        {
                            name: '报送量',
                            data: dataValue,
                            type: 'line',
                            symbol: 'triangle',
                            symbolSize: 20,
                            lineStyle: {
                                color: '#5470C6',
                                width: 4,
                                type: 'dashed'
                            },
                            itemStyle: {
                                borderWidth: 3,
                                borderColor: '#4890fb',
                                color: '#54a200'
                            },
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                        }
                        ,
                        {
                            name: '采用量',
                            type: 'line',
                            data: markNum,
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        }
                    ]
                });
            });
        }

        getAction();

        $('#searchBtn').on('click', function () {
            getAction();
            return false;
        });
    });
</script>